/* override */
.md-popup {
  ul, li {
    padding: 0;
    margin: 0;
  }
}

.md-popup-box {
  box-shadow: none !important;
}

.popup p {
  background: #fff;
}

.fisand-demo-container {
  .md-example-content {
    position relative;
    overflow hidden;
  }

  .md-dialog .md-popup-box, .md-slide-up, .md-popup {
    // zoom: 1 !important;
  }

  .md-action-bar {
    position: static;
    background: ghostwhite;
  }

  .md-example-child-button, .md-example-child-md-activity-indicator, .md-example-child-progress {
    padding: 20px;
  }

  .md-drop-menu + .content {
    font-size: 13px;
    text-align: center;
    line-height: 200px
  }  

  .md-example-child-drop-menu {
    position: relative;
    height: 200px;
    background: #f9fafb;
    overflow: hidden;
  } 
 
  .md-drop-menu-bar {
    height: 55px;
    z-index: 9999;
  }

  .md-drop-menu {
    height: 100%;
  }

  .md-drop-menu .md-popup {
    position: absolute;
  }

  .md-drop-menu .md-cell-item-title {
    margin: 0;
  }

  .md-example-child-stepper {
  
  }

  .md-amount {
    font-size: 40px !important;
  }

  .activity-indicator-container {
    padding: 7.5px 10px !important;
  }

  .md-activity-indicator-text {
    font-size: 16px !important;
    margin-left: 7.5px !important;
  }
  .md-example-child-md-activity-indicator-1 .activity-indicator-container .md-activity-indicator-css .md-activity-indicator-text {
    font-size: 14px !important;
  }

  .md-example-child-md-activity-indicator-1 .activity-indicator-container .md-activity-indicator-css .md-activity-indicator-svg {
    width: 25px !important;
    height: 25px !important;
  }

  .md-cell-item-children {
    padding: 0;
  }

  .md-example-child-icon .md-example-item p, .md-example-child-icon .md-example-item-s p {
    font-size: 13px !important;
  }

  .md-activity-indicator .rolling-container svg {
    width: 25px !important;
    height: 25px !important;
  }

  .md-progress .rolling-container svg {
    width: 50px !important;
    height: 50px !important;
  }

  .md-example-child-progress .progress-value {
    font-size: 12px !important;
  }

  .md-example-child-action-sheet {
    padding: 20px;
  }

  .md-steps {
    font-size: 14px !important;
  }

  .md-example-child-steps-8 .custom-content .amount .md-amount {
    font-size: 40px !important;
  }

  .md-steps.md-steps-vertical .step-wrapper .text-wrapper .active{
    font-size: 20px !important;
  }

  .md-example-child-steps-8 .custom-content .desc {
    line-height: 20px !important;
  }

  .md-example-child-swiper-3 li {
    list-style: none;
  }

  .md-example-child-steps-8 .md-steps.md-steps-vertical {
    height: 350px;
  }

  .md-steps.md-steps-vertical {
    padding: 40px 40px 0 !important;
  }

  .md-cell-item-body {
    padding: 0;
  }
  
  .md-tag .shape-quarter {
    width: 28px;
    height: 28px;
  }

  .left-button {
    margin-left: 40px !important;
  }

  .md-bill-detail {
    padding-bottom: 20px !important;
  }

  .md-example-child-bill-1 .md-bill .header-slot .title {
    margin: 0;
  }

  .md-example-child-bill-1 .md-bill .header-slot {
    padding: 20px 0 10px 0;
  }

  .md-bill-header {
    padding: 14px 16px 4px;
  }

  .md-example-child-bill-1 .md-bill .footer-slot {
    padding: 16px 0;
  }

  .md-example-child-water-mark-0 .text {
    font-size: 12px;
  }

  .md-example-child-water-mark-0 .text-container {
    padding: 16px;
  }

  .md-example-child-water-mark-0 .text {
    margin-bottom: 10px;
  }

  .md-example-child-agree {
    padding: 0;
  }

  .md-example-child-check .md-check-box .md-icon {
    right: -3px;
  }

  .md-field_footer p {
    margin: 0;
  }

  .md-field_header_brief {
    margin-top: 4px;
  }


  .md-field_content .md-fake-input {
    line-height: 50px;
  }

  .md-fake-input {
    padding-top: 10px !important;
  }

  .md-radio--is-inline {
    margin-right: 15px;
  }

  .md-example-child-radio {
    margin: 20px
  }

  .md-example-child-radio .md-field{
    padding: 0;
  }
  
  .md-radio-box .md-icon {
    right: -2px;
  }

  .demo2-footer-right, .demo2-footer-left {
    font-size: 12px;
  }

  .md-example-child-dialog, .md-example-child-landscape, .md-example-child-result-page, .md-example-child-check, .md-example-child-switch, .md-example-child-tip,.md-example-child-toast, .md-example-child-transition {
    padding: 20px;
  }
}

.fisand-demo-container {
  .md-example-child-md-activity-indicator-0 .md-activity-indicator.md-activity-indicator-css .md-activity-indicator-svg {
    width: 30px !important;
    height: 30px !important;
  }

  .md-button-loading .md-activity-indicator-svg {
    width: 18px !important;
    height: 18px !important;
  }

  .md-icon.icon-font.md {
    font-size: 16px;
  }

  .md-button {
    font-size: 18px !important;
  }
  .md-button.link {
    font-size: 12px !important;
  }

  .md-field .md-cell-item-body{
    .md-cell-item-content {
      font-size: 18px;
    }
    .md-cell-item-right {
      font-size: 14px;
    }
    .md-cell-item-brief {
      font-size: 12px;
      margin-top: 4px;
    }
    p {
      margin: 0;
      padding: 0;
    }
  }

  .md-detail-item {
    font-size: 14px;
  }

  .md-drop-menu, .md-cell-item-content, .md-steps .step-wrapper .icon-wrapper .md-icon {
    font-size: 16px !important;
  }

  .md-field-item-title {
    font-size: 16px;
  }

  .md-example-child .md-drop-menu {
    position: absolute;
  }

  .md-example-child-drop-menu-3 .md-drop-menu-custom-title {
    font-size: 14px;
  }

  .md-example-child-drop-menu-3 .md-drop-menu-custom-brief, .md-tag .size-large {
    font-size: 12px;
  }

  .md-notice-bar, .md-steps .step-wrapper .text-wrapper .name, .md-tab-bar-item {
    font-size: 14px;
  }

  .md-example-child-progress .progress-value, .slide-page, .md-example-child-swiper-3 .banner-item, .md-example-child-tab-bar-4 .custom-item .text {
    font-size: 16px;
  }

  .md-steps .bar.vertical-bar {
    left: 7.5px;
  }

  .md-tag .size-small {
    font-size: 10px;
  }

  .md-tag {
    position: relative;
  }

  .md-amount {
    font-size: 18px !important;
  }

  .md-switch:after {
    top: 2px;
    left: 2px;
  }

  .md-switch.active:after {
    transform: translate(16px);
  }

  .holder {
    width: 44px;
    height: 44px;
  }

  .md-notice-bar {
    min-height: 32px;
    padding-left: 16px;
  }

  .md-notice-bar-content {
    line-height: 32px;
  }

  .md-notice-bar-right{
    padding-right: 16px;
  }

}

.fisand-demo-container .md-action-bar .price {
  font-size: 24px !important;
}

.md-action-bar small {
  font-size: 16px !important;
  margin-left: 5px !important;
}
.md-action-bar .md-action-bar-button {
  margin-bottom 0px !important;
}
.md-example-child-tabs-0 .content {
  margin: 0 !important;
  font-size: 14px !important;
}

.md-action-sheet-content, .md-action-sheet-item {
  font-size: 18px !important;
  list-style: none;
}

.md-bill-header {
  .title {
    font-size: 30px !important;
  }

  .desc {
    font-size: 13px !important;
  }
}

.md-bill-footer .footer-slot {
  font-size: 10px !important;
}

.md-bill-title {
  font-size: 18px !important;
}

.md-bill-no, .md-captcha-btn {
  font-size: 12px !important;
}

.md-number-keyboard-container .keyboard-key .keyboard-key-item {
  font-size: 26px !important;
}

.md-captcha-title {
  font-size: 22px !important;
}

.md-captcha-message {
  font-size: 14px !important;
}

.md-codebox-box {
  font-size: 24px !important;
}

.md-dialog-close .md-icon {
  font-size: 18px !important;
}

.dark {
  .md-field {
    background-color: var(--c-bg);
  }

  .md-example-child-tabs .md-tab-bar {
    background-color: var(--c-bg);
  }

  .md-example-child-tabs-0 .content {
    background-color: var(--c-bg);
  }

  // .md-bill {
  //   background-color: var(--c-bg) !important;
  // }
  .md-number-key-item {
    background-color: var(--c-bg);
  }
}

.md-popup-title-bar .title-bar-title p.title {
  margin: 0;
  line-height: 50px;
}

.popup-content {
  font-size: 18px !important;
}

.popup-content-1 {
  font-size: 14px !important;
}

.md-example-child-selector-1 .selector-item-body .selector-item-left .holder {
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  line-height: 44px !important;
}

.md-example-child-selector-1 .selector-item-body .selector-item-content {
  font-size: 16px !important;
}

.md-example-child-selector-1 .selector-item-body .selector-item-content .selector-item-brief {
  font-size: 12px !important;
}

.md-example-child-selector-1 .selector-header, .md-example-child-selector-1 .selector-footer {
  font-size: 12px !important;
}

.demo-component {
  overflow: hidden;
  a {
    text-decoration: none;
  }
}

.md-number-keyboard-container .keyboard-key .keyboard-key-item.delete {
  background-size: 23px !important;
}

.md-number-keyboard-container .keyboard-operate .keyboard-operate-item.delete {
  background-size: 27px !important;
}

.md-number-keyboard-container .keyboard-key .keyboard-key-item.slidedown {
  background-size: 27px !important;
}

.md-input-item.is-title-latent .md-field-item-content {
  min-height: 58px !important;
}

.md-example-child-input-item-3 .md-field .input-operator {
  font-size: 14px !important;
}

.md-example-child-input-item-3 .is-amount .md-input-item-input::-webkit-input-placeholder {
  font-size: 30px !important;
}

.md-example-child-scroll-view-0 .scroll-view-item {
  padding: 15px 0 !important;
  font-size: 14px !important;
}

.md-scroll-pulldown {
  padding: 10px 0 !important;
  .md-activity-indicator-rolling {
    transform: scale(.5)
  }
  .pulldown-tip {
    margin-left: 0 !important;
    font-size: 12px !important;
  }
}

.fisand-demo-container {
  margin-top: 20px;
}

.fisand-demo-container *, *::after, *::before {
  border-width: 1px !important;
}

.fisand-demo-container .md-drop-menu-bar .bar-item span:after {
  border-width: 8px !important;
}

.md-example-child-button {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-button.inline {
  margin-right: 12px;
}

.md-example-section:last-child .md-example-child-button-3 {
  display: flex;
}

.md-example-child-reader .image-reader-list .image-reader-item .image-reader-item-del {
  transform: scale(0.5);
  transform-origin: top right;
}

.md-example-child-reader .image-reader-list .image-reader-item.add p {
  font-size: 10px !important;
}

.md-image-item {
  width: 100px !important;
  height: 100px !important;
}

.md-skeleton {
  zoom: .5 !important;
}

.md-stepper-button::after, .md-stepper-button::before {
  zoom: .5 !important;
}

.md-action-sheet-cancel {
  height: 66px !important;
  line-height: 40px !important;
  list-style: none;
}

.md-popup-title-bar>div {
  padding-top: 30px !important;
}

@media (max-width: 640px) {
  .nav-bar-title {
    font-size: 1rem !important;
  }
}


:root, .demo-component
  /// Text Size
  --md-font-heading-large  : 30px !important
  --md-font-heading-medium : 26px !important
  --md-font-heading-normal : 22px !important
  --md-font-caption-large  : 18px !important
  --md-font-caption-normal : 16px !important
  --md-font-body-large     : 14px !important
  --md-font-body-normal    : 13px !important
  --md-font-minor-large    : 12px !important
  --md-font-minor-normal   : 10px !important

  --md-font-weight-light    : 300 !important
  --md-font-weight-normal   : 400 !important
  --md-font-weight-medium   : 500 !important
  --md-font-weight-semibold : 600 !important

  /// Radius Size
  --md-radius-normal : 8px !important
  --md-radius-circle : 50% !important

  /// Border Size
  --md-border-width-base : 2px !important

  /// Spacing size
  --md-h-gap-xs : 4px !important
  --md-h-gap-sm : 6px !important
  --md-h-gap-md : 10px !important
  --md-h-gap-lg : 16px !important
  --md-h-gap-sl : 20px !important

  --md-v-gap-xs : 4px !important
  --md-v-gap-sm : 6px !important
  --md-v-gap-md : 10px !important
  --md-v-gap-lg : 16px !important
  --md-v-gap-sl : 20px !important
  /// component
.md-action-bar
  --md-action-bar-button-gap: 10px !important
  --md-action-bar-button-gap: 10px !important

.md-action-sheet
  --md-action-sheet-height: 60px !important

.md-button
  --md-button-height: 50px !important
  --md-button-small-height: 36px !important

.md-cashier
  --md-cashier-choose-amount-font-size: 40px !important
  --md-cashier-choose-channel-title-font-size: 15px !important

  /// cell-item
.md-cell-item
  --md-cell-item-min-height: 50px !important
  --md-cell-item-padding-v : 16px !important
  --md-cell-item-multilines-padding-v: 18px !important

.md-codebox
  --md-codebox-font-size: 25px !important
  --md-codebox-width: 32px !important
  --md-codebox-height: 36px !important
  --md-codebox-gutter: 10px !important
  --md-codebox-border-width: 1px !important

.md-dialog
  --md-dialog-width: 303px !important
  --md-dialog-radius: 6px !important
  --md-dialog-body-padding: 26px !important
  --md-dialog-title-font-size: 20px !important
  --md-dialog-action-height: 50px !important
  --md-dialog-icon-size: 50px !important

.md-drop-menu
  --md-drop-menu-height: 55px !important

.md-field-item
  --md-field-item-min-height: 50px !important
  --md-field-item-padding-v: 15px !important
  --md-field-item-title-width: 80px !important
  --md-field-item-title-gap: 5px !important

.md-icon
  --md-icon-size-xss: 8px !important
  --md-icon-size-xs: 10px !important
  --md-icon-size-sm: 12px !important
  --md-icon-size-md: 16px !important
  --md-icon-size-lg: 21px !important

.md-image-viewer-box
  --md-image-viewer-index-font-size: 16px !important
  --md-image-viewer-index-bottom: 50px !important


.md-input-item
  --md-input-item-height: 50px !important
  --md-input-item-font-size-large: 40px !important

.md-landscape
  --md-landscape-width: 270px !important

.md-number-keyboard-container
  --md-number-keyboard-height: 214px !important
  --md-number-keyboard-key-height: 54px !important

.md-popup-title-bar
  --md-popup-title-bar-height: 60px !important
  --md-popup-title-bar-height-large: 90px !important
  --md-popup-title-bar-radius: 14px !important
  --md-popup-title-bar-radius-large: 20px !important
  --md-popup-title-bar-font-size-title: 20px !important

.md-result-page
  --md-result-page-image-size: 130px !important

.md-stepper
  --md-stepper-height: 25px !important
  --md-stepper-width-button: 27px !important
  --md-stepper-width-input: 34px !important
  --md-stepper-radius-button: 1px !important

.md-steps
  --md-steps-border-size: 1px !important
  --md-steps-icon-size: 15px !important
  --md-steps-text-gap-horizontal: 10px !important
  --md-steps-text-gap-vertical: 20px !important

.md-switch
  --md-switch-width: 40px !important
  --md-switch-height: 24px !important

.md-tab-bar
  --md-tab-height: 50px !important
  --md-tab-ink-height: 1px !important

.md-tab-picker
  --md-tab-picker-height: 250px !important

.md-tag
  --md-tag-fillet-radius: 1px !important
  --md-tag-tiny-font-size: 6px !important

.md-tip-content
  --md-tip-radius: 500px !important
  --md-tip-padding: 8px 16px !important
  --md-tip-close-size: 16px !important
  --md-tip-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important

.md-toast
  --md-toast-padding: 10px 15px !important
